<!doctype html>
<!--[if lt IE 7 ]> <html lang="ja" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="ja" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="ja" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="ja" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="ja" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>selectors 2 Attribute について</title>
	<meta name="description" content="" />
	<meta name="author" content="Y.Nishimura@Office L / nishimuray@gmail.com" />

	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<link rel="shortcut icon" href="/favicon.ico" />
	<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

	<link rel="stylesheet" href="css/test.style.css?v=1" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/modernizr.js"></script>
	<script>!window.jQuery && document.write('<script src="js/jquery-1.6.1.js"><\/script>')</script>
	<script type="text/javascript" src="js/test.script.js"></script>
<style>
.cacps  { border:1px solid #f00;}
.cacs   { color:#666; }
.cacws  { font-style:italic; }
.caews  { color:#f0f; }
.caes   { font-size:1.5em; }
.canes  { background:#ccc; }
.casws  { letter-spacing:5px; }
.cas    { border:2px dotted #0f0; }
.cmas   { color:blue;font-size:1.5em; }
</style>
</head>
<body>
<p>メモ</p>
<ul>
<li><a href="http://api.jquery.com/category/selectors/">jQuery本家ドキュメントのselectorsカテゴリ</a></li>
<li><a href="http://api.jquery.com/category/selectors/attribute-selectors/">jQuery本家ドキュメントのselectorsカテゴリのAttribute selectorカテゴリ</a></li>
</ul>

<p>Attributeカテゴリのセレクタ</p>

<ul id="fc">
<li>Attribute Contains Prefix Selector [name|="value"]</li>
<li>Attribute Contains Selector [name*="value"]</li>
<li>Attribute Contains Word Selector [name~="value"]</li>
<li>Attribute Ends With Selector [name$="value"]</li>
<li>Attribute Equals Selector [name="value"]</li>
<li>Attribute Not Equal Selector [name!="value"]</li>
<li>Attribute Starts With Selector [name^="value"]</li>
<li>Has Attribute Selector [name]</li>
<li>Multiple Attribute Selector [name="value"][name2="value2"]</li>
</ul>

<a hreflang="ja" href="#">acps1</a>
<a hreflang="ja-jp" href="#">acps2</a>
<a hreflang="japanese" href="#">acps3</a><br />

<span class="acps">acps1</span>
<span class="acps-now">acps2</span>
<span class="acpsnow">acps3</span>
<span class="nowacps">acps4</span>



<span name="acps">name acps1</span>
<span name="acps-now">name acps2</span>
<span name="acpsnow" test="this is test">name acps3</span>
<span name="nowacps">name acps4</span>

<span test1="test1" test2="test2">2-2</span>
<span test1="test1" test2="test3">2-3</span>
<span test1="test1" test3="test2">3-2</span>
<span test1="test1" test3="test3">3-3</span>



<script type="text/javascript">
<!-- 
$(function() {

	// ■ Attribute Contains Prefix Selector [name|="value"]
	// 指定した ja がハイフンの前までで一致なので、ja-jp もマッチ。japanese は一致しないのでマッチしない
	$('a[hreflang|="ja"]').addClass("cacps");

	// 指定した test がハイフンの前までで一致なので、.acps , .acps-now にマッチ。.acpsnow だとマッチしない。もちろん .nowacps にもマッチしない
	$('span[class|="acps"]').addClass("cacps");


	// ■ Attribute Contains Selector [name*="value"]
	// class名にtestが含まれているものにマッチ。（上記の.testnowにもマッチする）
	$('span[class*="acps"]').addClass("cacs");


	// ■ Attribute Contains Word Selector [name~="value"]
	// アトリビュート中で空白で区切られたワードと完全にマッチするものがマッチ。ハイフンもワード扱い。
	$('span[class~="acps"]').addClass("cacws");	// .acps とだけマッチ。


	// ■ Attribute Ends With Selector [name$="value"]
	$('span[class$="acps"]').addClass("caews");	// .acps と .nowacps にマッチ。。すると思ったら不正解。
		// class は複数の値が入り、その順序に意味がないので終わりと一致、の概念に当たらないらしい。

	$('span[name$="acps"]').addClass("caews");	// .acps と .nowacps にマッチ。これは正解。
		// name はstrなので終わりと一致にマッチする


	// ■ Attribute Equals Selector [name="value"]
	$('span[name="acps"]').addClass("caes");	// name=acps にマッチ。


	// ■ Attribute Not Equal Selector [name!="value"]
	$('span[name!="acps"]').addClass("canes");	// name=acps じゃないものにマッチ。


	// ■ Attribute Starts With Selector [name^="value"]
	$('span[class^="acps"]').addClass("casws");	// .acpsで始まるものにマッチ。

	// ■ Has Attribute Selector [name]
	$('span[test]').addClass("cas");	// test を持っているものにマッチ。

	// ■ Multiple Attribute Selector [name="value"][name2="value2"]
	$('span[test1="test1"][test3="test2"]').addClass("cmas");

});
// -->
</script>

</body>
</html>
